<template>
  <div class="main-box">
    <div class="back" @click="$router.back()">
      <i class="el-icon-back back-btn"></i>
    </div>
    <TicketEditForm :ticket="ticket" @selectCustomer="selectCustomer" @submitSuccess="$router.back()" @cancel="$router.back()"></TicketEditForm>
    <div class="customer-box">
      <Customer :customer="customer"></Customer>
    </div>
  </div>
</template>

<script>
import {findById} from "@/api/ticket";
import Customer from '@/components/chat/components/customer'
import TicketEditForm from './ticket-edit-form'

export default {
  name: "ticket-edit",
  components: {
    TicketEditForm,
    Customer
  },
  data() {
    return {
      ticket:{priority:2, status:'open'},
      customer:{}
    }
  },
  created() {
    this.loadData()
  },
  watch: {
    $route(to, from) {
      if (this.$route.query.ticketId) {
        this.loadData()
      }
    }
  },
  methods: {
    selectCustomer(customer) {
      this.$set(this,'customer',customer)
    },
    loadData() {
      let ticketId = this.$route.query['ticketId']
      this.ticket.ticketId = ticketId
      if(ticketId) {
        findById(ticketId).then(res => {
          if(res.code == 200) {
            if(res.data!=null) {
              this.customer = {customerId:res.data.customerId,name:res.data.customerName,email:res.data.customerEmail,customerMobile:res.data.customerMobile}
              this.ticket = res.data
            }else {
              this.$message.warning('工单不存在')
              setTimeout(() => {
                this.$router.replace({name:'ticket-all'})
              },1000)
            }
          }
        })
      }
    },
  }
}

</script>

<style scoped lang="less">
.main-box {
  display: flex;
  box-sizing: border-box;
  .back {
    padding: 15px;
    border-bottom: 1px solid #F0F0F0;
    .back-btn {
      cursor: pointer;
      font-weight: bold;
      &:hover {
        color: #0091ff;
      }
    }
  }
  .customer-box {
    width: 250px;
    flex-shrink: 0;
    overflow-y: auto;
    @media(max-width: 679px) {
      display: none;
    }
  }
}
</style>
